<template>
    <div class="insure">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">填写投保单</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <!-- 投保人信息 -->
        <group class="insure__formPolicy--group">
            <cell>
                <div class="badge-value  radio-check" slot>
                    <div class="insure__radio">
                        <div @click="policyHolderTypeChange(PERSONAL)">
                            <img class="insure__img" v-show="policyHolderType!= PERSONAL" src="~assets/x3/ico/selected_un.png">
                            <img class="insure__img" v-show="policyHolderType== PERSONAL" src="~assets/x3/ico/selected.png">
                            <label class="insure__policyHolderType" for="personal">个人</label>
                        </div>
                        &nbsp&nbsp
                        <div v-show="isShowEnt" @click="policyHolderTypeChange(ENTERPRISE)">
                            <img class="insure__img" v-show="policyHolderType!= ENTERPRISE" src="~assets/x3/ico/selected_un.png">
                            <img class="insure__img" v-show="policyHolderType== ENTERPRISE" src="~assets/x3/ico/selected.png">
                            <label class="insure__policyHolderType" for="enterprise">企业</label>
                        </div>
                    </div>
                </div>
                <span class="insure__list--title" slot="after-title">
                    <span class="insure__iconspan"></span>
                    <span class="insure__iconspan--title">投保人信息</span>
                </span>
            </cell>

            <div class="insure__formPolicy">
                <div v-show="policyHolderType == PERSONAL">
                    <x-input class="base-input_font" placeholder="姓名" id="testDemo" v-model="appliDto.insuredName" :min="StrLenth.userNameMin" :max="StrLenth.userNameMax" required>
                        <div class="insure__input " slot="label">
                            <img src="~assets/x3/ico/icon-name.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>
                    <x-input class="base-input_font" placeholder="证件号码" :max="18" v-model="appliDto.identifyNumber" @on-blur="idCarAppliBlur" required>
                        <div class="insure__input" slot="label">
                            <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>
                    <datetime placeholder="出生日期" :readonly="true" v-show="appliDto.appliIsIdCar" v-model="appliDto.birth" class="insure__input">
                        <div class="insure__input" slot="title">
                            <img src="~assets/x3/ico/icon-date.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </datetime>
                    <datetime placeholder="出生日期" v-show="!appliDto.appliIsIdCar" v-model="appliDto.birth" :start-date="beginTime" :end-date="endTime" @on-change="appliBirthChange()" confirm-text="完成" cancel-text="取消" class="insure__input">
                        <div class="insure__input" slot="title">
                            <img src="~assets/x3/ico/icon-date.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </datetime>
                    <!-- 日期必选项同步 -->
                    <x-input class="base-input_font" v-show="false" v-model="appliDto.birth" required></x-input>

                    <x-input class="base-input_font" placeholder="手机号码  (收取短信通知)" v-model="appliDto.linkMobile" :min="9" :max="11" keyboard="number" required>
                        <div class="insure__input" slot="label">
                            <img src="~assets/x3/ico/icon-tel.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>
                    <x-input class="base-input_font" v-model="appliDto.email" :max="64" placeholder="电子邮件  (收取电子保单)" is-type="email" required>
                        <div class="insure__input" slot="label">
                            <img src="~assets/x3/ico/icon-email.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>
                    <!-- v-show="eleShow.occupation" -->
                    <x-input class="base-input_font" v-show="(eleShow.occupation||eleShow.occupationLimit) && isPolicyHolderList[0].isPolicyHolder" @click.native="showOccupation(0)" v-model="insuredItemProcutDtoList[0].insuredDto.occupationName" readonly placeholder="职业类别">
                        <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-occupation.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>

                </div>
                <div v-show="policyHolderType != PERSONAL">
                    <x-input class="base-input_font" placeholder="企业名称" :min="StrLenth.enterpriseNameMin" :max="StrLenth.enterpriseNameMax" v-model="appliDto.insuredName" required>
                        <div class="insure__input" slot="label">
                            <img src="~assets/x3/ico/icon-ent.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>

                    <x-input class="base-input_font" placeholder="统一社会信用代码" :max="20" v-model="appliDto.identifyNumber" required>
                        <div class="insure__input" slot="label">
                            <!-- 证件号码&nbsp -->
                            <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>

                    <x-input class="base-input_font" placeholder="手机号码  (收取短信通知)" v-model="appliDto.linkMobile" :max="11" keyboard="number" required>
                        <div class="insure__input" slot="label">
                            <img src="~assets/x3/ico/icon-tel.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>
                    <x-input class="base-input_font" v-model="appliDto.email" :max="64" placeholder="电子邮件  (收取电子保单)" is-type="email">
                        <div class="insure__input" slot="label">
                            <img src="~assets/x3/ico/icon-email.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>

                </div>

            </div>
        </group>

        <!-- 被保险人 -->
        <group v-for="(inNum,index) in insuredNum" :key="index">
            <cell>
                <div v-show="index == 0 && sameInsurance" class="badge-value" slot>
                    <div v-show="isPolicyHolderList[0].isPolicyHolder" class="insure__policyHolderType insure__middle">同投保人</div>
                    <input @click="changePolicyHolderList" v-model="isPolicyHolderList[0].isPolicyHolder" type="checkbox" class="weui-switch">
                </div>
                <span class="insure__list--title" slot="after-title">
                    <span class="insure__iconspan"></span>
                    <span class="insure__iconspan--title">被保险人 {{inNum |filNumber}}
                        <span v-show="inNum!=1 &&minInsure<inNum" @click="deleInsured(index)" class="insure__iconspan--delete"><img class="insure__img" src="~assets/x3/ico/delete.png"> 删除</span>
                    </span>
                </span>
            </cell>
            <div class="insure__formPolicy">
                <transition name="fade">
                    <div v-show="!isPolicyHolderList[index].isPolicyHolder">
                        <x-input class="base-input_font" placeholder="姓名" v-model="insuredItemProcutDtoList[index].insuredDto.insuredName" :min="StrLenth.userNameMin" :max="StrLenth.userNameMax" required>
                            <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-name.png" class="icon-img">&nbsp&nbsp</div>
                        </x-input>
                        <x-input class="base-input_font" placeholder="证件号码" :max="18" v-model="insuredItemProcutDtoList[index].insuredDto.identifyNumber" @on-blur="idCarInsuredBlur(index)" :is-type="isIdCard" required>
                            <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp </div>
                        </x-input>
                        <datetime placeholder="出生日期" :readonly="true" v-show="insuredItemProcutDtoList [index].insuredDto.insureIsIdCar" v-model="insuredItemProcutDtoList[index].insuredDto.birth" confirm-text="完成" cancel-text="取消" class="insure__input">
                            <div class="insure__input" slot="title">
                                <img src="~assets/x3/ico/icon-date.png" class="icon-img">&nbsp&nbsp
                            </div>
                        </datetime>
                        <datetime placeholder="出生日期" :start-date="beginTime" :end-date="endTime" v-show="!insuredItemProcutDtoList [index].insuredDto.insureIsIdCar" confirm-text="完成" cancel-text="取消" class="insure__input" v-model="insuredItemProcutDtoList[index].insuredDto.birth" @on-change="birthdayChange(index)">
                            <div class="insure__input" slot="title">
                                <img src="~assets/x3/ico/icon-date.png" class="icon-img">&nbsp&nbsp
                            </div>
                        </datetime>
                        <!-- 日期必选项同步 -->
                        <x-input class="base-input_font" v-show="false" v-model="insuredItemProcutDtoList[index].insuredDto.birth" required></x-input>
                        <cell v-show="policyHolderType== PERSONAL">
                            <!-- <div slot="after-title">111111111</div> -->
                            <selector class="insure_sele" slot="after-title" v-model="insuredItemProcutDtoList[index].insuredDto.insuredidentity" placeholder="与投保人关系 " :options="insuredRel">
                            </selector>
                            <img src="~assets/x3/ico/icon-re.png" slot="icon" class="icon-img">&nbsp&nbsp
                        </cell>
                        <x-input class="base-input_font" v-show="eleShow.occupation||(eleShow.occupationLimit&&index==0)" v-model="insuredItemProcutDtoList[index].insuredDto.occupationName" @click.native="showOccupation(index)" readonly placeholder="职业类别">
                            <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-occupation.png" class="icon-img">&nbsp&nbsp
                            </div>
                        </x-input>
                    </div>
                </transition>
                <!-- v-if="inNum == insuredNum" -->
                <x-input placeholder="" :disabled='true' required>
                    <div class="insure__input--Bene" src="~assets/x3/ico/icon_syr.png" slot="label"><img src="~assets/x3/ico/icon_syr.png" class="icon-img">&nbsp法定受益人&nbsp</div>
                </x-input>
                <!-- <x-input :disabled='true' v-if="inNum == insuredNum">
                                                                                                        <div class="insure__input--Bene" slot="label">法定受益人&nbsp</div>
                                                                                                    </x-input> -->
            </div>
            <div v-if="inNum == insuredNum && eleShow.moreInsured" class="common__footer" @click="addInsured"> <img class="insure__img" src="~assets/x3/ico/add.png"> 追加被保险人&nbsp</div>

            <div v-if="!(inNum == insuredNum && eleShow.moreInsured)" class="insure__base--padding"></div>
        </group>

        <group v-show="eleShow.isShowOther" class="insure__formPolicy--group">
            <cell>
                <span class="insure__list--title" slot="after-title">
                    <span class="insure__iconspan"></span>
                    <span class="insure__iconspan--title">补充信息&nbsp</span>
                </span>
            </cell>
            <div class="insure__formPolicy">
                <!-- v-show="eleShow.occupation" -->
                <!-- <x-input @click.native="showOccupation()" :disabled='true' placeholder="职业类别">
                                                    <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-occupation.png" class="icon-img">&nbsp&nbsp
                                                    </div>
                                                </x-input> -->
                <x-input class="base-input_font" v-show="eleShow.destination" placeholder="出行国家或地区" readonly v-model="destination">
                    <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-con.png" class="icon-img">&nbsp&nbsp
                    </div>
                </x-input>
                <x-input class="base-input_font" @click.native="showCount" placeholder="出行国家或地区" v-show="eleShow.abroadDestination" :disabled='true'>
                    <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-con.png" class="icon-img">&nbsp&nbsp
                    </div>
                </x-input>
                <div v-if="eleShow.abroadDestination" class="weui-cell vux-cell-form-preview">
                    <div class="weui-form-preview__bd">
                        <div v-for="(counrty,index) in seleCountry" :key="index" class="weui-form-preview__item">
                            <label class="weui-form-preview__label">
                                <span>{{counrty.cName}}</span>
                            </label>
                            <span @click="deleCount(index)" class="weui-form-preview__value">
                                <i class="weui-icon weui_icon_clear weui-icon-clear"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <!-- <cell v-show="eleShow.locationHouse">
                                                        <selector class="insure_sele" slot="after-title" v-model="addressDto.region" placeholder="房屋所在地 " :options="reginList">
                                                        </selector>
                                                        <img src="~assets/x3/ico/icon-home.png" slot="icon" class="icon-img">&nbsp&nbsp
                                                    </cell> -->

                <x-input class="base-input_font" placeholder="详细地址 (详细到门牌号)" :min="3" v-model="addressDto.addressName" v-show="eleShow.address" required>
                    <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-addre.png" class="icon-img">&nbsp&nbsp</div>
                </x-input>

                <x-input class="base-input_font" @on-blur="carNoLimit" placeholder="车牌号" v-show="eleShow.licenseno" :max="10" v-model="mainHeadDto.licenseno" required>
                    <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp</div>
                </x-input>

                <x-input class="base-input_font" placeholder="车架号" v-show="eleShow.vinno" :max="17" v-model="mainHeadDto.vinno" required>
                    <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon_carNum.png" class="icon-img">&nbsp&nbsp</div>
                </x-input>

                <cell v-show="eleShow.houseType">
                    <!-- <div slot="after-title">111111111</div> -->
                    <selector class="insure_sele" slot="after-title" v-model="addressDto.buildStructure" placeholder="房屋类型 " :options="hourseType">
                    </selector>
                    <img src="~assets/x3/ico/icon-hometype.png" slot="icon" class="icon-img">&nbsp&nbsp
                </cell>
                <x-input v-for="(item,index) in addInfoInputConfig[INPUT]" :key="index" class="base-input_font" :placeholder="item.key" :max="item.max" :min="item.min" v-model="addInfoInputConfig[INPUT][index].value" required>
                    <div class="insure__input" slot="label"><img :src="item.imgUrl" class="icon-img">&nbsp&nbsp</div>
                </x-input>

                <cell v-for="(item,index) in addInfoInputConfig[SELELIST]" :key="index+10">
                    <selector class="insure_sele" slot="after-title" v-model="addInfoInputConfig[SELELIST][index].value" :placeholder="item.key" :options="item.seleList">
                    </selector>
                    <img :src="item.imgUrl" slot="icon" class="icon-img">&nbsp&nbsp
                </cell>
            </div>
        </group>

        <group v-show="showUpload" class="insure__group ">
            <cell>
                <span class="insure__list--title" slot="after-title">
                    <span class="insure__iconspan"></span>
                    <span class="insure__iconspan--title" v-html="seleValue.curUpload.introductionTitle"></span>
                </span>
            </cell>
            <cell v-show="seleValue.curUpload.introduction!=''">
                <div class="que-input" slot="after-title" v-html="seleValue.curUpload.introduction"></div>
            </cell>
            <div class="insure__formPolicy">
                <div>
                    <x-input v-for="(item,index) in uploadInputConfig[INPUT]" :key="index" class="base-input_font" :placeholder="item.key" :max="item.max" :min="item.min" v-model="uploadInputConfig[INPUT][index].value" required>
                        <div class="insure__input" slot="label"><img :src="item.imgUrl" class="icon-img">&nbsp&nbsp</div>
                    </x-input>
                </div>

                <cell v-for="(item,index) in uploadInputConfig[SELELIST]" :key="index">
                    <selector class="insure_sele" slot="after-title" v-model="uploadInputConfig[SELELIST][index].value" :placeholder="item.key" :options="item.seleList">
                    </selector>
                    <img :src="item.imgUrl" slot="icon" class="icon-img">&nbsp&nbsp
                </cell>

                <div class="insure-img-upload">
                    <div class="insure__group_row insure__group_row_imgs" v-for="(item,index) in listNo" :key="index">
                        <input :id="'file'+index" type="file" multiple size="20" accept="image/*" @change="onFileChange($event,index)" style="display: none;">
                        <!-- <div class="row_label"> -->
                        <!-- {{titleList[index].title}} -->
                        <!-- <img v-if="index==0" src="~assets/x3/service/service_dljy.png">
                    <img v-if="index==1" src="~assets/x3/service/service_sgdbc.png">
                    <img v-if="index==2" src="~assets/x3/service/service_sgdbc.png">
                    <img v-if="index==3" src="~assets/x3/ico/icon-card1.png">
                    <img v-if="index==4" src="~assets/x3/ico/icon-occupation.png"> -->
                        <!-- <div>{{titleList[index].title}}</div> -->

                        <!-- </div> -->
                        <!-- <div class="insure-text">
                        {{titleList[index].title}}
                    </div> -->

                        <div class="insure-img" @click="addPic(index)">
                            <img src="~assets/x3/ico/x3_addImg.png" />
                            <div class="insure-upload-font" style="font-size: 10px;">{{titleList[index]}}</div>
                        </div>
                        <!-- <img class="addImages" @click="addPic(index)" src="~assets/x3/ico/x3_addImg.png"> -->
                        <!-- <div class="insure__group_row_imgs" v-show="initData['showImages'+(index)].length >0"> -->
                        <div class="img" v-for="(image,i) in initData['showImages'+(index)]" :key="i" @click="delImg(index, i, image.name)">
                            <img :src="image.data" :alt="i" />
                            <!-- <x-button @click.native="removeImageOfRow(index)">移除全部图片</x-button> -->
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </group>

        <div class="common__footer common__clause">
            <span @click="confirmItem">
                <img v-show="isCheck" class="insure__img" src="~assets/x3/ico/check.png">
                <img v-show="!isCheck" class="insure__img" src="~assets/x3/ico/check_un.png">
                <!-- <input type="checkbox" id="sure" value="sure" style="vertical-align:middle; margin-top:0;"> -->
                <span class="insure__sure">已阅读并同意使用</span>
            </span>
            <span @click="clauseRead('statement')" class="insure__protocol">《投保声明》</span>
            <span @click="clauseRead('notice')" class="insure__protocol">《理赔须知》</span>
            <span @click="getClause()" class="insure__protocol">《保险条款》</span>
        </div>
        <div class="insure__footer">
            <div class="insure__leftbtn">¥
                <span>{{curprice}}</span>
            </div>
            <div @click="goPolicy" :style="detailsStore.planQueryStyle" class="insure__rightbtn">提交</div>
        </div>
        <!-- <sele-country></sele-country> -->
        <!-- 投保声明  理赔须知 -->
        <x-dialog v-model="showClauseRead" class="dialog-Einv" hide-on-blur>
            <div style="padding:10px">
                <div class="insure__clauseRead" style="overflow-y: overlay;">
                    <p align="left" v-html="readText"></p>
                </div>
            </div>
            <div>
                <x-button style="width: 100px !important;" @click.native="showClauseRead=false" mini type="primary">确认</x-button>
                <!-- <x-button mini>取消</x-button> -->
            </div>
        </x-dialog>

        <actionsheet class="insure__actionsheet" v-show="showSeleCountry" v-model="showSeleCountry">
            <div slot="header">
                <sele-country @closeShowCount="closeShowCount"></sele-country>
            </div>
        </actionsheet>
        <actionsheet class="insure__actionsheet" v-show="isShowOccupation" v-model="isShowOccupation">
            <div slot="header">
                <occupation-type @closeOccupation="closeOccupation"></occupation-type>
            </div>
        </actionsheet>
    </div>
</template>

<script>
// import CarConfig from "https://uat-lm.libertymutual.com.cn/sticsale/upload/carConfig.js";
import OccupationType from "src/components/OccupationType";
import SeleCountry from "src/components/SeleCountry";
import { RequestUrl } from "src/common/url";
import Config from "src/common/config/insureConfig";
import {
    Mutations,
    policyHolderType,
    Gender,
    PerIdentifyType,
    EntIdentifyType,
    benefType,
    insuredidentity,
    intervalTime,
    RouteUrl, StrLenth
} from "src/common/const";
import {
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    Selector,
    XButton,
    XDialog,
    CellFormPreview,
    Actionsheet,
    TransferDom,
    Toast
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        CellFormPreview,
        XDialog,
        Selector,
        XHeader,
        Group,
        Cell,
        XInput,
        Datetime,
        XSwitch,
        XButton,
        SeleCountry,
        Actionsheet,
        TransferDom,
        Toast,
        OccupationType
    },
    computed: mapState({
        // insure: "insure",
        isLoading: "isLoading",
        user: "user",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        indexSeleCountry: "seleCountry",
        isWeChar: "isWeChar",
        shareData: "shareData",
        initIndexData: "initIndexData",
        seleValue: "seleValue",
        accessUrl: "accessUrl",
        dealUid: "dealUid"
    }),
    data() {
        return {
            StrLenth: {}, //字符长度常量
            isShowOccupation: false,
            showSeleCountry: false,
            inputCountry: "",
            seleCountry: [],
            showClauseRead: false,
            readText: "",
            beginTime: DateUtil.getDateyMdSubtract(intervalTime.YEAR),
            endTime: DateUtil.getNowDateStr_Ymd(),
            PERSONAL: policyHolderType.PERSONAL,
            ENTERPRISE: policyHolderType.ENTERPRISE,
            insuredNum: 1, //被保险人数量
            appliDto: {
                //投保人信息
                insuredType: policyHolderType.PERSONAL,
                insuredName: "",
                identifyType: PerIdentifyType.ID_CAR,
                identifyNumber: "",
                birth: "",
                sex: "",
                email: "",
                linkMobile: "",
                appliIsIdCar: false,
                payMth: "7",
            },
            mainHeadDto: {
                bussFromNo: DateUtil.getDataTimeRam(),
                currency: "CNY",
                language: "C",
                riskCode: "",
                argueSolution: "1",
                departureCountry: "CHN",
                departureCountryName: "中国大陆",
                arrivalCountry: "中国",
                arrivalCountryName: "中国大陆",
                licenseno: "",
                vinno: "",
                othEngage: "",
            },
            insuredItemProcutDtoList: [
                {
                    //被保险人信息
                    insuredDto: {
                        insuredType: policyHolderType.PERSONAL,
                        insuredName: "",
                        identifyType: PerIdentifyType.OTHER,
                        identifyNumber: "",
                        birth: "",
                        sex: "",
                        insuredidentity: "",
                        email: "",
                        benefType: benefType.LEGAL,
                        linkMobile: "",
                        insureIsIdCar: false,
                        occupationCode: "",
                        occupationName: ""
                    },
                    itemKindDtoList: [],
                    productDto: {}
                }
            ],
            addressDto: {
                // 地址信息
                region: "",
                addressName: "",
                buildStructure: "0001"
            },
            isPolicyHolderList: [
                //是否勾选了同投保人
                {
                    isPolicyHolder: true
                }
            ],
            policyHolderType: policyHolderType.PERSONAL, //企业/个人
            insuredRel: [], //被保人关系
            eleShow: [], //页面显示元素
            hourseType: [], //房屋类型
            isCheck: false,
            destination: "出行国家   -   中国大陆",
            plainList: ["中国大陆"],
            reginList: [], //房屋所在地
            // insureDto: {
            //     consumerId: "0050000007",
            //     operateCode: "5006000074",
            //     sequenceId: "1499132555608",
            //     usercode: "LIMING",
            //     password: "LiMing100",
            // },
            insurePriceList: [],
            curprice: 0,
            isIdCard: function (value) {
                let flag = false;
                if (value.length > 6) {
                    //有效
                    flag = true;
                }
                return {
                    valid: flag,
                    msg: "如未成年子女暂时不能填写证件号码，请填写出生日期"
                };
            },
            deadLine: "",
            sameInsurance: true,
            occIndex: 999,
            isShowintegral: false,
            minInsure: 0,
            isShowEnt: true,
            // defaultMen: "法定受益人"
            textType: "资料上传",
            listNo: 0,//模块和子数组个数
            titleList: [],
            initData: {
                // showImages0: [],//界面显示的图片数组
                // showImages1: [],//界面显示的图片数组
                // showImages2: [],//界面显示的图片数组
                // showImages3: [],//界面显示的图片数组
                // showImages4: [],//界面显示的图片数组
                // uploadAllImages: [],//上传的图片数组
            },
            // upLoadType: 1,  //false 1资料上传 2 马上报案
            url: "",
            showUpload: false,
            isInitUpload: false,
            insureInputConfig: [],
            appliInputConfig: [],
            addInfoInputConfig: [],
            uploadInputConfig: [],

            INPUT: "1",
            SELELIST: "2",

            otherInfo: {},
            isNeedUpload: false,
            sendInfo: "",
        };
    },
    watch: {
        isShowOccupation(cur, old) {
            if (!cur && this.occIndex != 999) {
                let query = {
                    _this: this,
                    index: this.occIndex
                }
                this.$common.storeCommit(this, Mutations.GET_INSURE_OCCUPATION_DATA, query);
            }
        },
        showSeleCountry(cur, old) {
            let data = {
                state: cur
            }
            this.$common.storeCommit(this, Mutations.SHOW_SELE_COUNTRY, data);
            let _this = this;
            if (cur == false) {
                setTimeout(function () {
                    _this.seleCountry = _this.indexSeleCountry;
                }, 0);
            } else {
                let parm = {
                    seleCountry: this.seleCountry
                };
                this.$common.storeCommit(this, Mutations.INSURE_CURPRICE, parm);
            }
        },
        showClauseRead(cur, old) {
            if (cur) {
                $("body").css("overflow-y", "hidden");
            } else {
                $("body").css("overflow-y", "auto");
            }
        },
        // insurePriceList(cur, old) {
        //     let price = 0;

        //     for (let i = 0; i < cur.length; i++) {
        //         price += parseInt(cur[i]);
        //     }
        //     this.curprice = price;
        // },
        //  当 个人/企业 选择的时候，根据勾选类型不同 选择选项发生变化
        policyHolderType(cur, old) {
            if (cur == policyHolderType.PERSONAL) {
                this.identifyType = PerIdentifyType.ID_CAR;
                this.insuredRel = Config.getRel(policyHolderType.PERSONAL, this.eleShow.isRelOther);
            } else {
                this.identifyType = EntIdentifyType.THREE_IN_ONE;
                this.insuredRel = Config.getRel(policyHolderType.ENTERPRISE, this.eleShow.isRelOther);
            }
        }
    },
    filters: {
        filNumber(val) {
            if (val == "1") {
                return "";
            }
            return val;
        }
    },
    methods: {
        upLoad(fineName, proposalNo, resultRes) {
            let _this = this;
            // debugger
            // if (this.saveInsure.upLoadQuery && this.seleValue.isSetUpload) {
            let formData = new FormData();
            for (let index = 0; index < this.initData.uploadAllImages.length; index++) {
                let element = this.initData.uploadAllImages[index];
                formData.append("imgFiles", element);
            }
            formData.append("imgFileName", fineName);
            formData.append("proposalNo", proposalNo);
            this.$http.post(RequestUrl.INSURE_UPLOAD, formData).then(function (res) {
                if (res.success) {
                    let dataSave = {
                        loading: true,
                        res: resultRes
                    };

                    _this.$common.storeCommit(
                        _this,
                        Mutations.INSURE_RES_DATA,
                        dataSave
                    );
                } else {
                    _this.$vux.alert.show({
                        content: _this.$common.alertMsg("上传文件失败！", "red;")
                    });
                }
            });
            // }
        },
        setUploadInit() {
            // debugger
            if (this.saveInsure.upLoadQuery && this.seleValue.isSetUpload && !this.isInitUpload) {
                this.isInitUpload = true;
                this.showUpload = true;
                let listData = this.seleValue.curUpload.question;
                let setData = {
                    uploadAllImages: []
                }
                for (let i = 0; i < listData.length; i++) {
                    this.titleList.push(listData[i]);
                    setData['showImages' + i] = [];
                    this.listNo++;
                }
                this.initData = setData;
                // console.log(this.initData);
                // console.log(this.titleList);
                // console.log(this.initData);
            } else if (!this.isInitUpload) {
                this.showUpload = false;
            }
        },
        isShowintegralMe(val) {
            // debugger
            if (this.saveInsure.refereeData != false) {
                let refUserDto = this.saveInsure.refereeData;
                if (val == refUserDto.idNumber && !this.isShowintegral && refUserDto.storeFlag == "1" && (refUserDto.userType == "1" || refUserDto.userType == "2" || refUserDto.userType == "5")) {
                    this.isShowintegral = true;
                    return this.showErrorMsg("积分用户投保人和被保人为自己并不会获得宝豆！", true);
                }
            } else {
                if (this.user.isLogin) {
                    let refUserDto = this.user.userDto;
                    if (val == refUserDto.idNumber && !this.isShowintegral && refUserDto.storeFlag == "1" && (refUserDto.userType == "1" || refUserDto.userType == "2" || refUserDto.userType == "5")) {
                        this.isShowintegral = true;
                        return this.showErrorMsg("积分用户投保人和被保人为自己并不会获得宝豆！", true);
                    }
                }
            }
        },
        carNoLimit() {
            if (this.saveInsure.eleShow.limitLicenseno) {
                let limit = this.mainHeadDto.licenseno.substring(0, 2);
                if (this.$common.isNotEmpty(this.seleValue.limitCarInfo[limit])) {
                    return this.showErrorMsg("暂时不支持该车牌投保！");
                }
                let limitType = this.mainHeadDto.licenseno.substring(0, 1) + "*";
                if (this.$common.isNotEmpty(this.seleValue.limitCarInfo[limitType])) {
                    return this.showErrorMsg("暂时不支持该车牌投保！");
                }
            }
            return true;
        },
        showOccupation(index) {
            this.occIndex = index;
            this.isShowOccupation = true;
        },
        closeOccupation() {
            this.isShowOccupation = false;
        },
        closeShowCount() {
            this.showSeleCountry = false;
        },
        showCount() {
            this.showSeleCountry = true;
        },
        changePolicyHolderList() {
            this.setIndexPrice();
        },
        appliBirthChange() {
            this.setIndexPrice();
        },
        setIndexPrice() {
            // if (this.isPolicyHolderList[0].isPolicyHolder && this.detailsStore.curSelePlan.ageRelated == "1") {
            if (this.isPolicyHolderList[0].isPolicyHolder) {
                if (this.appliDto.birth != "") {
                    this.getPrice("price", 0, DateUtil.jsGetAge(this.appliDto.birth));
                }
            }
        },
        getInsurePriceListPrice() {
            let price = 0;
            for (let i = 0; i < this.insurePriceList.length; i++) {
                price += parseFloat(this.insurePriceList[i]);
            }
            this.curprice = price;
        },
        deleCount(index) {
            let newSeleCountry = [];
            if (this.seleCountry.length == 1) {
                this.$vux.alert.show({ content: this.$common.alertMsg("最少保留一个出行国家", "red;") });
            } else {
                for (let i = 0; i < this.seleCountry.length; i++) {
                    if (index != i) {
                        newSeleCountry.push(this.seleCountry[i]);
                    }
                }
                this.seleCountry = newSeleCountry;
            }
        },
        getClause() {
            let query = {
                // clauseTitle: this.detailsStore.curSelePlan.clauseContent,
                _this: this,
                planId: this.detailsStore.curSelePlan.planId
            }
            this.$common.storeCommit(this, Mutations.CUR_CLAUSE_TITLE_LIST, query);


        },
        clauseRead(type) {
            if (type == "notice") {
                this.readText = this.detailsStore.curSelePlan.notice;
            } else {
                this.readText = this.detailsStore.curSelePlan.statement;
            }
            this.showClauseRead = true;
        },
        valCellInput() {
            $(".weui-input").focus();
            $(".weui-input").blur();
        },
        birthdayChange(index) {
            this.travelInsurance(index);
            // let birth = this.insuredItemProcutDtoList[index].insuredDto.birth;
        },
        travelInsurance(index) {
            let birth = this.insuredItemProcutDtoList[index].insuredDto.birth;
            let age = DateUtil.getAge(birth);
            this.getPrice("price", index, age);
        },
        policyChange(value) {
            alert(value);
        },
        policyHolderTypeChange(type) {
            this.policyHolderType = type;
            if (this.policyHolderType == this.ENTERPRISE) {
                this.isPolicyHolderList[0].isPolicyHolder = false;
                this.sameInsurance = false;

            } else {
                this.isPolicyHolderList[0].isPolicyHolder = true;
                this.sameInsurance = true;
            }

            // if (type == this.ENTERPRISE) {
            // }
        },
        confirmItem() {
            this.isCheck = !this.isCheck;
        },
        //投保人判断是否为身份证 是->带出出生日期和性别
        idCarAppliBlur(val) {
            this.isShowintegralMe(val);
            let isIdCarGet = false;
            if (Validation.isIdNumber(val) && this.policyHolderType != this.ENTERPRISE) {
                this.appliDto.appliIsIdCar = true;
                this.appliDto.birth = Validation.getBirthByidCardNumber(val);
                this.appliDto.sex = Validation.getGenderByidCardNumber(val);
                this.appliDto.identifyType = PerIdentifyType.ID_CAR;
                isIdCarGet = true;
                this.setIndexPrice();
            } else {
                isIdCarGet = false;
                this.appliDto.appliIsIdCar = false;
                this.appliDto.sex = Gender.UNKNOWN;
                this.appliDto.identifyType = PerIdentifyType.OTHER;
            }

            let query = {
                _this: this,
                idCar: val,
                isIdCarGet: isIdCarGet,
                type: "insure"
            }
            this.$common.storeCommit(this, Mutations.APPLI_FIND_ID_CAR, query);
        },
        //被保险人判断是否为身份证 是->带出出生日期和性别
        idCarInsuredBlur(index) {
            let identifyNumber = this.insuredItemProcutDtoList[index].insuredDto
                .identifyNumber;
            this.isShowintegralMe(identifyNumber);
            if (Validation.isIdNumber(identifyNumber)) {
                this.insuredItemProcutDtoList[index].insuredDto.insureIsIdCar = true;
                this.insuredItemProcutDtoList[
                    index
                ].insuredDto.birth = Validation.getBirthByidCardNumber(identifyNumber);
                this.insuredItemProcutDtoList[
                    index
                ].insuredDto.sex = Validation.getGenderByidCardNumber(identifyNumber);
                // this.travelInsurance(index);
                this.insuredItemProcutDtoList[index].insuredDto.identifyType =
                    PerIdentifyType.ID_CAR;
            } else {
                this.insuredItemProcutDtoList[index].insuredDto.insureIsIdCar = false;
                this.insuredItemProcutDtoList[index].insuredDto.sex = Gender.UNKNOWN;
                this.insuredItemProcutDtoList[index].insuredDto.identifyType =
                    PerIdentifyType.OTHER;
            }
        },
        //点击提交 触发
        goPolicy() {
            let _this = this;
            // 如果为企业 修改投保人的信息 以及性别
            if (this.policyHolderType == policyHolderType.ENTERPRISE) {
                this.appliDto.sex = Gender.UNKNOWN;
                this.appliDto.identifyType = "99";
                for (let i = 0; i < this.insuredItemProcutDtoList.length; i++) {
                    this.insuredItemProcutDtoList[i].insuredDto.insuredidentity = "99";
                }

            } else {
                // 如果不为企业 并且勾选了同投保人
                if (this.isPolicyHolderList[0].isPolicyHolder) {
                    this.insuredItemProcutDtoList[0].insuredDto.insuredName = this.appliDto.insuredName;
                    this.insuredItemProcutDtoList[0].insuredDto.identifyType = this.appliDto.identifyType;
                    this.insuredItemProcutDtoList[0].insuredDto.identifyNumber = this.appliDto.identifyNumber;
                    if (!Validation.isIdNumber(this.appliDto.identifyNumber)) {
                        this.insuredItemProcutDtoList[0].insuredDto.identifyType = PerIdentifyType.OTHER;
                    }
                    this.insuredItemProcutDtoList[0].insuredDto.birth = this.appliDto.birth;
                    this.insuredItemProcutDtoList[0].insuredDto.sex = this.appliDto.sex;
                    this.insuredItemProcutDtoList[0].insuredDto.email = this.appliDto.email;
                    this.insuredItemProcutDtoList[0].insuredDto.linkMobile = this.appliDto.linkMobile;
                    this.insuredItemProcutDtoList[0].insuredDto.insuredidentity = insuredidentity.ONESELF;
                }
            }
            if (this.eleShow.abroadDestination) {
                let eName = "";
                let cName = "";
                let eNameSt = "";
                for (let i = 0; i < this.seleCountry.length; i++) {
                    // cName += this.seleCountry[i].cName + " ";
                    // if (this.seleCountry[i].cName == "全球") {
                    //     eName += "all ";
                    // } else {
                    cName += this.seleCountry[i].cName + " ";
                    if (this.seleCountry[i].eName.indexOf("Schengen-States") >= 0) {
                        eNameSt += this.seleCountry[i].eName + " ";
                    } else {
                        eName += this.seleCountry[i].eName + " ";
                    }
                    // }
                }
                this.mainHeadDto.arrivalCountry = eName + eNameSt;
                this.mainHeadDto.arrivalCountryName = cName;
            }
            this.appliDto.insuredType = this.policyHolderType;
            this.insuredItemProcutDtoList.insuredType = this.policyHolderType;
            this.valCellInput();
            this.saveData();
            if (!this.isCheck && !this.detailsStore.isPlanQuery) {
                this.$vux.alert.show({ content: this.$common.alertMsg("请勾选并阅读条款", "red;") });
                setTimeout(() => {
                    this.$vux.alert.hide();
                }, 3000);
            } else {
                if (this.baseVali() && this.curprice != 0) {
                    let parm = {
                        _this: this,
                        user: this.user,
                        curNsSelePlan: this.detailsStore.curNsSelePlan,
                        curSelePlan: this.detailsStore.curSelePlan
                    }
                    this.$common.storeCommit(this, Mutations.SET_COMMIT_INSURE_DATA, parm);

                    let userId = "";
                    if (this.user.isLogin) {
                        userId = this.user.userDto.userCode;
                    }

                    let refereeId = "";
                    if (this.saveInsure.refereeData != false && this.$common.isNotEmpty(this.saveInsure.refereeData) && this.$common.isNotEmpty(this.saveInsure.refereeData.userCode)) {
                        refereeId = this.saveInsure.refereeData.userCode
                    }
                    let insureQuery = {
                        accessUrl: "<br>" + this.accessUrl + "<br>ver:" + localStorage["version"] + "<br>INSURE_TIME:" + DateUtil.getNowDateStr_Ymdhm(new Date()) + "<br>userId:" + userId + "  refId:" + refereeId + "<br>browser:" + localStorage["BOTYPE"] + "<br>isWeChar:" + this.isWeChar + "<br>ACC_LOG:" + sessionStorage["ACC_LOG"],
                        city: this.initIndexData.region,
                        shareUid: this.saveInsure.shareUid,
                        callBackUrl: this.shareData.callBackUrl,
                        singleMember: this.shareData.singleMember,
                        successfulUrl: this.shareData.successfulUrl,
                        planId: this.detailsStore.curNsSelePlan.planId,
                        risk: this.detailsStore.curNsSelePlan.proCode,
                        riskName: this.saveInsure.indexData.productType,
                        proRiskCode: this.saveInsure.indexData.riskCode,
                        productId: this.saveInsure.indexData.id,
                        branchCode: this.saveInsure.hotArea.branchCode,
                        refereeId: refereeId,
                        productName: this.saveInsure.indexData.productCname,
                        amount: this.curprice,
                        clauseUrl: this.detailsStore.curSelePlan.clauseUrl,
                        isHotArea: this.saveInsure.isHotArea,
                        areaCode: this.saveInsure.areaCode,
                        dealUid: this.dealUid,
                        planName: this.detailsStore.curSelePlan.planName,
                        deadLine: this.deadLine,
                        channelName: this.saveInsure.channelName,
                        isNeedUpload: this.isNeedUpload,
                        otherInfo: this.sendInfo
                    }
                    this.saveInsure.policyDataDto.mainHeadDto.othEngage = this.sendInfo;
                    let request = {
                        insureQuery: insureQuery,
                        proposalSaveReq: {   //----
                            policyDataDto: this.saveInsure.policyDataDto,
                            isAutoUndwrt: 1
                        },
                        hotarea: this.saveInsure.hotArea,  // ---

                        kinds: this.detailsStore.curNsSelePlan.kinds,  // ---
                        // planName:
                        user: {   // ---
                            userCode: userId
                        },
                    };
                    if (!this.isLoading) {

                        let parm = {
                            curprice: _this.curprice,
                            seleCountry: _this.seleCountry
                        };
                        // let formData = new FormData(request.getFormData());
                        // debugger
                        this.$common.storeCommit(_this, Mutations.INSURE_CURPRICE, request);
                        this.$common.goUrl(this, RouteUrl.INSURE_CONFIRM);
                        _this.$http.post(RequestUrl.SAVE_PLAN, request).then(function (res) {
                            let alertData = "";
                            let isAlert = false;
                            if (res.success == true) {
                                let responseJson = JSON.parse(res.result.responseJson);
                                if (responseJson.success == "true") {
                                    if (_this.saveInsure.upLoadQuery && _this.seleValue.isSetUpload) {
                                        _this.upLoad(_this.saveInsure.indexData.productCname, responseJson.bussNewNo, res);
                                    } else {
                                        let dataSave = {
                                            loading: true,
                                            res: res
                                        };

                                        _this.$common.storeCommit(
                                            _this,
                                            Mutations.INSURE_RES_DATA,
                                            dataSave
                                        );
                                    }
                                } else {
                                    isAlert = true;
                                    alertData = responseJson.message;
                                }
                            } else {
                                isAlert = true;
                                alertData = res.result;
                                // alertData = "投保失败，请稍后再试！";
                            }
                            if (isAlert) {
                                if (typeof (alertData) == "object") {
                                    alertData = JSON.parse(res.result.responseJson);
                                    alertData = responseJson.message;
                                    if (_this.$common.isEmpty(alertData)) {
                                        alertData = "投保失败- 11，请稍后再试！";
                                    }
                                }
                                // alertData = "投保失败，请稍后再试！";
                                _this.$vux.alert.show({
                                    content: _this.$common.alertMsg(alertData, "red;")
                                });
                            }



                        });
                    }
                }
            }
        },
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.DETAILS);
            // this.$common.goBack(this);
        },
        //追加被保险人触发
        addInsured() {
            this.insuredNum++;
            let baseinsuredItemProcutDtoList = {
                insuredDto: {
                    insuredType: policyHolderType.PERSONAL,
                    insuredName: "",
                    identifyType: PerIdentifyType.ID_CAR,
                    identifyNumber: "",
                    birth: "",
                    sex: "",
                    insuredidentity: "",
                    email: "",
                    benefType: benefType.LEGAL,
                    linkMobile: "",
                    insureIsIdCar: false,
                    occupationCode: "",
                    occupationName: "",
                },
                itemKindDto: [],
                productDto: {}
            };

            let baseIsPolicyHolder = { isPolicyHolder: false };
            this.insuredItemProcutDtoList.push(baseinsuredItemProcutDtoList);
            this.isPolicyHolderList.push(baseIsPolicyHolder);

            this.getPrice("add", 0, this.detailsStore.curSelePlan.minAge);
        },
        //删除某个被保险人触发
        deleInsured(index) {
            let insureArray = [];
            let insurePriceList = [];
            for (let i = 0; i < this.insuredItemProcutDtoList.length; i++) {
                if (i != index) {
                    insurePriceList.push(this.insurePriceList[i]);
                    insureArray.push(this.insuredItemProcutDtoList[i]);
                }
            }
            this.insurePriceList = insurePriceList;
            this.insuredItemProcutDtoList = insureArray;
            this.insuredNum--;
            this.isPolicyHolderList.pop();
            this.getInsurePriceListPrice();
        },
        saveData() {
            let saveParm = {
                appliDto: this.appliDto,
                mainHeadDto: this.mainHeadDto,
                insuredItemProcutDtoList: this.insuredItemProcutDtoList,
                addressDto: this.addressDto,
                isPolicyHolderList: this.isPolicyHolderList,
                policyHolderType: this.policyHolderType,
                insuredNum: this.insuredNum,
                titleList: this.titleList,
                initData: this.initData,
                listNo: this.listNo,
                isInitUpload: this.isInitUpload,
                showUpload: this.showUpload,
                insureInputConfig: this.insureInputConfig,
                appliInputConfig: this.appliInputConfig,
                addInfoInputConfig: this.addInfoInputConfig,
                uploadInputConfig: this.uploadInputConfig
            };

            this.$common.storeCommit(this, Mutations.SAVE_INSURE_DATA, saveParm);
        },
        setData() {
            let parm = {
                _this: this,
                minAge: this.detailsStore.curSelePlan.minAge
            }
            this.$common.storeCommit(this, Mutations.SAVE_INSURE_SET_DATA, parm);
            if (this.policyHolderType == this.ENTERPRISE) {
                this.isPolicyHolderList[0].isPolicyHolder = false;
                this.sameInsurance = false;

            } else {
                // this.isPolicyHolderList[0].isPolicyHolder = true;
                this.sameInsurance = true;
            }

        },
        baseVali() {
            // $('.weui-input').focus();
            // $('.weui-input').blur();
            let isSubmit = true;
            //投保人信息校验
            if (this.policyHolderType == policyHolderType.ENTERPRISE) {
                if (this.policyHolderType != policyHolderType.ENTERPRISE) {
                    if (this.appliDto.identifyNumber.length == 18) {
                        if (!Validation.isIdNumber(this.appliDto.identifyNumber)) {
                            return this.showErrorMsg("投保人证件号不是有效身份证号");
                        }
                    }
                }
                if (this.$common.isEmpty(this.appliDto.insuredName) || this.appliDto.insuredName.length < StrLenth.enterpriseNameMin || this.appliDto.insuredName.length > StrLenth.enterpriseNameMax) {
                    return this.showErrorMsg("企业名称长度不符(" + StrLenth.enterpriseNameMin + "-" + StrLenth.enterpriseNameMax + ")");
                } else {
                    this.appliDto.insuredName = this.appliDto.insuredName.trim();
                }
            } else {
                let age = DateUtil.getAge(this.appliDto.birth);
                if (age < 18) {
                    return this.showErrorMsg("投保人年龄必须大于18岁");
                }
                if (this.$common.isEmpty(this.appliDto.insuredName) || this.appliDto.insuredName.length < StrLenth.userNameMin || this.appliDto.insuredName.length > StrLenth.userNameMax) {
                    return this.showErrorMsg("投保人姓名长度不符(" + StrLenth.userNameMin + "-" + StrLenth.userNameMax + ")");
                } else {
                    this.appliDto.insuredName = this.appliDto.insuredName.trim();
                }
            }
            this.appliDto.identifyNumber = this.appliDto.identifyNumber.trim();
            if (Validation.isSpecialCharacters2(this.appliDto.insuredName)) {
                return this.showErrorMsg((this.policyHolderType == policyHolderType.ENTERPRISE ? "企业名称" : "投保人姓名") + "不能含有特殊字符");
            }
            if (this.$common.isEmpty(this.appliDto.insuredType)) {
                return this.showErrorMsg("请选择投保类型");
            }
            if (this.$common.isEmpty(this.appliDto.identifyNumber)) {
                return this.showErrorMsg((this.policyHolderType == policyHolderType.ENTERPRISE ? "统一社会信用代码" : "投保证件号码") + "不能为空");
            }
            if (Validation.isSpecialCharacters1(this.appliDto.identifyNumber)) {
                return this.showErrorMsg((this.policyHolderType == policyHolderType.ENTERPRISE ? "统一社会信用代码" : "投保证件号码") + "不能含有特殊字符");
            }
            if (this.appliDto.email != "") {
                if (!Validation.isEmail(this.appliDto.email.toLowerCase())) {
                    return this.showErrorMsg("投保邮箱格式不正确");
                } else {
                    this.appliDto.email = this.appliDto.email.trim();
                }
            }

            // if (!this.isPolicyHolderList[0].isPolicyHolder) {
            //     // //个人证件
            //     // if (this.appliDto.identifyNumber.length == 18) {
            //     //     if (!Validation.isIdNumber(this.appliDto.identifyNumber)) {
            //     //         return this.showErrorMsg("投保人证件号不是有效身份证号");
            //     //     }
            //     // } else if ((this.appliDto.identifyNumber + "").length < 7) {
            //     //     return this.showErrorMsg("投保人证件号无效");
            //     // } else if ((this.appliDto.identifyNumber + "").length == 9) {
            //     //     //护照
            //     // } else {
            //     //     //其他
            //     // }
            //     let age = DateUtil.getAge(this.appliDto.birth);
            //     if (age < 18) {
            //         return this.showErrorMsg("投保人年龄必须大于18岁");
            //     }
            // } else {
            //     //企业三证合一，51-工商登记号，52-税务登记号，53-组织机构代码，54-三证合一，99-其他
            //     // if (Validation.isErrTrinityIdNo(this.appliDto.identifyNumber)) {
            //     //     return this.showErrorMsg("统一社会信用代码为8-20位字母或数字");
            //     // }
            // }
            if (this.$common.isEmpty(this.appliDto.identifyType)) {
                //01-身份证/03-护照/04-军官证/99-其它
                this.appliDto.identifyType = "99";
            }

            let msg = Validation.isPhone11(this.appliDto.linkMobile);
            if (msg != null) {
                return this.showErrorMsg("投保" + msg);
            }
            if (Validation.isEmpty(this.appliDto.email)) {
                return this.showErrorMsg("投保人电子邮箱不能为空");
            }
            if (Validation.isEmpty(this.appliDto.sex)) {
                //99=未说明
                this.appliDto.sex = "9";
            }
            if (this.policyHolderType == this.PERSONAL && this.appliDto.birth == "") {
                isSubmit = false;
            }
            let myselfNo = 0;
            // 被保险人信息校验
            let minAge = this.detailsStore.curSelePlan.minAge;
            let minMonth = this.detailsStore.curSelePlan.minMonth;
            let maxAge = this.detailsStore.curSelePlan.maxAge;
            for (let i = 0; i < this.insuredItemProcutDtoList.length; i++) {
                if (i == 0 && this.policyHolderType == this.PERSONAL && this.insuredItemProcutDtoList[0].insuredDto.birth == "") {
                    isSubmit = false;
                }
                let birth = this.insuredItemProcutDtoList[i].insuredDto.birth;

                let ageInsure = DateUtil.getAge(birth);
                let isVal = false;
                if (i == 0 && this.eleShow.mainInsureVal) {
                    if (ageInsure < 18) {
                        return this.showErrorMsg("主被保险人必须大于18岁!");
                    }
                }
                if (minMonth != null && minMonth > 0 && ageInsure == 0) {
                    isVal = true;
                    let curMonth = DateUtil.getValMonth(birth);
                    if (curMonth < minMonth || ageInsure > maxAge) {
                        return this.showErrorMsg("该产品被保人年龄为" + minMonth + "个月 - " + maxAge + "周岁");
                    }
                }

                if (!isVal && (ageInsure < minAge || ageInsure > maxAge)) {
                    return this.showErrorMsg("该产品被保人年龄为" + minAge + "-" + maxAge + "周岁");
                }
                // if (age < minAge || age > maxAge) {
                //     return this.showErrorMsg("该产品被保人年龄为" + minAge + "-" + maxAge);
                // }
                //被保人信息
                let insuredName = this.insuredItemProcutDtoList[i].insuredDto.insuredName;//被保险人姓名
                let insuredType = this.insuredItemProcutDtoList[i].insuredDto.insuredType;//被保险人类型
                let identifyType = this.insuredItemProcutDtoList[i].insuredDto.identifyType;//被保险人证件类型
                let identifyNumber = this.insuredItemProcutDtoList[i].insuredDto.identifyNumber;//被保险人证件号
                let insuredidentity = this.insuredItemProcutDtoList[i].insuredDto.insuredidentity;//被保人与投保人关系
                //职业类别
                let occupationCode = this.insuredItemProcutDtoList[i].insuredDto.occupationCode;
                let benefType = this.insuredItemProcutDtoList[i].insuredDto.benefType;//受益方式

                let insuEmail = this.insuredItemProcutDtoList[i].insuredDto.email;
                if (this.$common.isEmpty(insuredName) || insuredName.length < StrLenth.userNameMin || insuredName.length > StrLenth.userNameMax) {
                    return this.showErrorMsg("被保人姓名长度不符(" + StrLenth.userNameMin + "-" + StrLenth.userNameMax + ")");
                }
                if (Validation.isSpecialCharacters2(insuredName)) {
                    return this.showErrorMsg("被保人姓名不能含有特殊字符");
                }
                this.insuredItemProcutDtoList[i].insuredDto.insuredName = this.insuredItemProcutDtoList[i].insuredDto.insuredName.trim();
                if (this.eleShow.occupation && this.$common.isEmpty(occupationCode)) {
                    return this.showErrorMsg("被保人职业类别不能为空");
                }
                if (this.eleShow.occupationLimit && this.$common.isEmpty(occupationCode) && i == 0) {
                    return this.showErrorMsg("主被保人职业类别不能为空");
                }
                if (this.eleShow.licenseno && this.$common.isEmpty(this.mainHeadDto.licenseno)) {
                    return this.showErrorMsg("车牌号不能为空");
                }
                if (this.eleShow.licenseno) {
                    let reg = /^[\u4e00-\u9fa5][a-zA-Z0-9]{6}$/;
                    if (reg.test(this.mainHeadDto.licenseno) === false) {
                        return this.showErrorMsg("车牌号格式错误，请重新输入！");
                    }
                    if (this.mainHeadDto.licenseno.substring(0, 1) === '军' || this.mainHeadDto.licenseno.substring(0, 1) === '警') {
                        return this.showErrorMsg("车牌号不能包含 [军、警]！");
                    }
                    if (!this.carNoLimit()) {
                        return false;
                    }
                    this.mainHeadDto.licenseno = this.mainHeadDto.licenseno.trim();
                }


                if (this.eleShow.vinno && this.$common.isEmpty(this.mainHeadDto.vinno)) {
                    return this.showErrorMsg("车架号不能为空");
                } else if (this.eleShow.vinno) {
                    this.eleShow.vinno = this.eleShow.vinno.trim();
                }
                if (this.$common.isEmpty(identifyNumber)) {
                    return this.showErrorMsg("被保人证件号码不能为空");
                }
                if (Validation.isSpecialCharacters1(identifyNumber)) {
                    return this.showErrorMsg("被保人证件号码不能含有特殊字符");
                }
                if (identifyNumber.length == 18) {
                    if (!Validation.isIdNumber(identifyNumber)) {
                        return this.showErrorMsg("被保人证件号不是有效身份证号");
                    }
                }
                this.insuredItemProcutDtoList[i].insuredDto.identifyNumber = this.insuredItemProcutDtoList[i].insuredDto.identifyNumber.trim();
                if (insuEmail != "") {
                    if (!Validation.isEmail(insuEmail.toLowerCase())) {
                        return this.showErrorMsg("被保人邮箱格式不正确");
                    }
                }

                if (this.$common.isEmpty(insuredType)) {
                    if (this.isPolicyHolderList[0].isPolicyHolder) {
                        this.insuredItemProcutDtoList[i].insuredDto.insuredType = 1;//个人
                    } else {
                        this.insuredItemProcutDtoList[i].insuredDto.insuredType = 2;//企业
                    }
                }
                if (this.$common.isEmpty(identifyType)) {
                    //01-身份证/03-护照/04-军官证/99-其它
                    this.insuredItemProcutDtoList[i].insuredDto.identifyType = "99";
                }
                let sex = this.insuredItemProcutDtoList[i].insuredDto.sex;//被保险人性别
                if (this.$common.isEmpty(sex)) {
                    //99=未说明
                    this.insuredItemProcutDtoList[i].insuredDto.sex = "9";
                }
                if (this.$common.isEmpty(insuredidentity)) {
                    return this.showErrorMsg("请选择与投保人关系");
                }
                if (i != 0) {
                    if (this.insuredItemProcutDtoList[i].insuredDto.birth == "") {
                        isSubmit = false;
                    }
                }
                if (insuredidentity == insuredidentity.ONESELF) {
                    myselfNo++;//被保人是自己
                }
                if (myselfNo > 1) {
                    return this.showErrorMsg("被保人不能多个本人");
                }
                for (let j = i + 1, l = this.insuredItemProcutDtoList.length; j < l; j++) {
                    let newName = this.insuredItemProcutDtoList[j].insuredDto.insuredName;//被保人姓名
                    let newIdentifyNumber = this.insuredItemProcutDtoList[j].insuredDto.identifyNumber;//被保人证件号
                    if (insuredName == newName && identifyNumber == newIdentifyNumber) {
                        return this.showErrorMsg("被保人不能重复");
                    }
                }
                //其他补充信息校验
                if (this.eleShow.address) {
                    if (this.addressDto.addressName == "") {
                        return this.showErrorMsg("详细地址不能为空");
                    } else {
                        if (this.addressDto.addressName.length < 3) {
                            return this.showErrorMsg("地址过短！");
                        }
                        let isCon = true;
                        if (this.addressDto.addressName.indexOf('街') >= 0 || this.addressDto.addressName.indexOf('路') >= 0 || this.addressDto.addressName.indexOf('号') >= 0 || this.addressDto.addressName.indexOf('道') >= 0) {
                            isCon = false;
                        }
                        if (isCon) {
                            return this.showErrorMsg("地址请具体到门牌号，需包含路、街、道、号！");
                        }
                    }
                }
                if (this.eleShow.houseType) {
                    if (this.addressDto.buildStructure == "") {
                        return this.showErrorMsg("房屋类型不能为空");
                    }
                }
                if (this.eleShow.abroadDestination) {
                    if (this.seleCountry.length == 0) {
                        return this.showErrorMsg("必须选择一个出行国家");
                    }
                }

            }
            if (!isSubmit) {
                return this.showErrorMsg("请将信息填写完整");
            }
            if (this.saveInsure.upLoadQuery && this.seleValue.isSetUpload) {
                this.isNeedUpload = true;
                let min = this.seleValue.curUpload.limitItem.min;
                for (let i = 0; i < this.titleList.length; i++) {
                    if (min > this.initData['showImages' + i].length) {
                        return this.showErrorMsg(this.titleList[i] + "，最少要上传" + min + "张图片");
                    }
                }
            }
            this.otherInfo = {};
            this.sendInfo = "";
            if (!this.inputConfig(this.addInfoInputConfig)) {
                return false;
            }

            if (!this.inputConfig(this.uploadInputConfig)) {
                return false;
            }
            // this.sendInfo = JSON.stringify(this.otherInfo);

            return true;
        },
        inputConfig(configList) {
            // debugger
            // debugger
            for (let conKey in configList) {
                let typeList = configList[conKey];
                for (let j = 0; j < typeList.length; j++) {
                    let configAdd = typeList[j];
                    let value = configAdd.value;
                    if (configAdd.isMust && configAdd.value == "") {
                        return this.showErrorMsg(configAdd.key + "不能为空!");
                    }
                    if (configAdd.inputType == this.INPUT) {
                        let length = configAdd.value.length;
                        if (length < configAdd.min) {
                            return this.showErrorMsg("必须输入" + configAdd.min + "个字符");
                        }
                    }
                    if (configAdd.regExp != "") {
                        let RegName = new RegExp(configAdd.regExp);
                        if (!RegName.test(value)) {
                            return this.showErrorMsg(configAdd.alert);
                        }
                    }
                    this.otherInfo[configAdd.key] = value;
                    this.sendInfo = configAdd.key + ":" + value + " ";
                    // console.log(this.otherInfo);
                    // if(){

                    // }
                }
            }

            return true;
        },
        showErrorMsg(errorMsg, type) {
            this.$vux.alert.show({ content: this.$common.alertMsg(errorMsg, "red;") });
            if (type) {
                return false;
            } else {
                // setTimeout(() => {
                //     this.$vux.alert.hide();
                // }, 3000);
                return false;
            }
        },
        getPrice(type, index, age) {
            let queryParm = {
                _this: this,
                productId: this.saveInsure.indexData.id,
                age: age,
                deadline: this.deadLine,
                planId: this.detailsStore.planId,
                riskCode: this.saveInsure.indexData.riskCode,
                type: type,
                index: index,
            }
            this.$common.storeCommit(this, "DETAILS_TEST", queryParm);
        },
        setConfig() {
            this.eleShow = this.saveInsure.eleShow;
            this.isShowEnt = this.saveInsure.eleShow.isShowEnt;
            //最小被保险人个数
            if (this.$common.isNotEmpty(this.eleShow.minInsure) && this.eleShow.minInsure != 0) {
                if (this.insuredNum < this.eleShow.minInsure) {
                    this.minInsure = this.eleShow.minInsure;
                    let min = this.eleShow.minInsure - this.insuredNum;
                    let _this = this;
                    for (let i = 0; i < min; i++) {
                        setTimeout(() => {
                            _this.addInsured();
                        }, 500 * i);
                    }
                }
            }
        },
        //选择文件
        addPic(index) {
            //IOS系统需要调用2次才能触发到click
            if (localStorage["BOTYPE"] == "I") {
                $("#file" + index).trigger('click');
                $("#file" + index).trigger('click');
            } else {
                $("#file" + index).trigger('click');
            }
            return false;
        },
        onFileChange(event, index) {
            let fileName = this.titleList[index];
            this.createImage(event, index, fileName);
            //创建图片阅读器并显示图片
            // switch (index) {
            //     case 0: this.createImage(event, index, "imageFileOne"); break;
            //     case 1: this.createImage(event, index, "imageFileTwo"); break;
            //     case 2: this.createImage(event, index, "imageFileThree"); break;
            //     case 3: this.createImage(event, index, "imageFileFour"); break;
            //     case 4: this.createImage(event, index, "imageFileFive"); break;
            //     default: break;
            // }
        },
        //创建图片
        createImage(obj, index, filePrdfix) {
            let files = obj.target.files || obj.dataTransfer.files;
            if (!files.length) return;
            let max = this.seleValue.curUpload.limitItem.max;
            if (max != 0 && this.initData['showImages' + index].length == max) {
                this.$vux.alert.show({ content: this.$common.alertMsg("该栏最多只能上传" + max + "张照片", "red;") });
                return;
            }
            if (this.isNotImgFile(files)) {
                this.$vux.alert.show({ content: this.$common.alertMsg("请选择图片文件！", "red;") });
                return;
            }
            if (typeof FileReader === 'undefined') {
                this.$vux.alert.show({ content: this.$common.alertMsg("您的浏览器不支持图片上传，请升级您的浏览器", "red;") });
                return false;
            }
            let leng = files.length;
            let _this = this;
            for (let i = 0; i < leng; i++) {
                //源文件
                // debugger
                let nowFile = files[i];
                //创建新名称的原文件
                let newFile = new File([nowFile], filePrdfix + "_" + new Date().getTime() + "-" + i + ".jpg", { type: "image/jpeg" });
                let newFileName = newFile.name;
                // debugger

                //输出到界面
                let reader = new FileReader();
                reader.readAsDataURL(nowFile);
                reader.onload = function (event) {
                    //根据模块追加图片
                    // console.log("新文件大小====" + _this.getFileSize(event.target.result) + "kb");
                    let size = _this.getFileSize(event.target.result);
                    _this.initData['showImages' + index].push({ data: event.target.result, name: newFileName });
                    if (size < 1000) {
                        // console.log('11111111111');
                        _this.initData.uploadAllImages.push(newFile);
                    } else {
                        // console.log('222222222222222');
                        _this.$common.canvasDataURL(event.target.result, {
                            quality: 0.2
                        }, _this, filePrdfix);
                    }
                    // console.log("压缩后====" + _this.$common.canvasDataURL(event.target.result, {
                    //     quality: 0.2
                    // }) + "kb");

                };
                //存放到上传图片数组中
                // this.initData.uploadAllImages.push(newFile);
            }
        },
        //获取文件大小
        getFileSize(base64Code) {
            let str = base64Code.substring(22);
            let equalIndex = str.indexOf('=');
            if (str.indexOf('=') > 0) {
                str = str.substring(0, equalIndex);
            }
            let strLength = str.length;//原始大小
            let fileLength = Math.ceil(parseInt(strLength - (strLength / 8) * 2) / 1024);;
            return fileLength;
        },
        //移除当前模块单个文件
        delImg(index, i, fileName) {
            //index=外循环下标
            //i = 内循环下标
            for (let j = 0; j < this.initData.uploadAllImages.length; j++) {
                let file = this.initData.uploadAllImages[j];
                if (fileName == file.name) {
                    //删除上传数组中指定名称的文件
                    this.initData.uploadAllImages.splice(j, 1);
                    break;
                }
            }
            //移除当前模块单个文件
            this.initData['showImages' + index].splice(i, 1);
        },
        //移除当前模块全部文件
        removeImageOfRow(index) {
            let upFiles = this.initData.uploadAllImages;
            let showFiles = this.initData['showImages' + index];
            for (let i = 0; i < upFiles.length; i++) {
                for (let j = 0; j < showFiles.length; j++) {
                    if (showFiles[j].name == upFiles[i].name) {
                        //删除上传数组中指定名称的文件
                        this.initData.uploadAllImages.splice(i, 1);
                    }
                }
            }
            //移除当前模块全部文件
            this.initData['showImages' + index] = [];
        },
        // 检查是否为非图像文件
        isNotImgFile(files) {
            for (let i = 0; i < files.length; i++) {
                let t = files[i].type;
                if (!/image\/\w+/.test(t)) {
                    return true;
                }
            }
        },
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["INSURE_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
        // alert(typeof (sessionStorage["test"]));
        // if (sessionStorage["INSURE_FORM_URL"] == "/"&&typeof (sessionStorage["INSURE_DATA"])!="undefined") {

        // }else 
        if (sessionStorage["INSURE_FORM_URL"] == "/") {
            this.$common.goUrl(this, RouteUrl.DETAILS);
        }
    },
    beforeDestroy() {
        // alert("insure beforeDestroy");
        let parm = {
            curprice: this.curprice,
            seleCountry: this.seleCountry
        };
        this.$common.storeCommit(this, Mutations.INSURE_CURPRICE, parm);
        this.saveData();
        let localSaveData = {
            // index:
        }
    },
    mounted() {
        sessionStorage["ACTIVITY_BACK_URL"] = RouteUrl.INSURE;
        document.title = '填写投保单';
        this.StrLenth = StrLenth; //字符长度常量
        //初始化，没有footer
        this.$init.subPageInit(this);
        let _this = this;


        //判断是否与年龄相关
        // if (this.detailsStore.ageRelated) {
        //     let birthday = _this.saveInsure.birthday;
        //     setTimeout(function () {
        //         _this.appliDto.birth = birthday;
        //     }, 0);
        // }
        // 获得当前的保障期限  用于计算价钱
        if (this.detailsStore.curSelePlan.isImmediate == "1" || this.detailsStore.curSelePlan.isImmediate == 1) {
            this.deadLine = DateUtil.DateDiff(this.saveInsure.periodDto.startDate, this.saveInsure.periodDto.endDate);
        } else {
            this.deadLine = DateUtil.DateDiff(this.saveInsure.periodDto.startDate, this.saveInsure.periodDto.endDate) + 1;
        }
        let dataSave = {
            loading: false,
            res: {}
        };
        _this.$common.storeCommit(
            _this,
            Mutations.INSURE_RES_DATA,
            dataSave
        );

        let limitData = {
            _this: this
        }
        // debugger
        if (this.saveInsure.eleShow.limitLicenseno) {
            _this.$common.storeCommit(
                _this,
                Mutations.GET_CARLIMIT_NO,
                limitData
            );
        }

        // window.addEventListener('load', function() {
        //     _this.saveData();
        // });
        // window.addEventListener('popstate', function(ev) {
        //     _this.saveData();
        // });

        //添加上一个页面的价钱
        // if (this.detailsStore.ageRelated && this.appliDto.birth != "") {
        //     this.getPrice("price", 0, DateUtil.jsGetAge(this.appliDto.birth));
        // } else {
        //     this.getPrice("price", 0, this.detailsStore.curSelePlan.minAge);
        // }


        this.setData();
        this.setConfig();

        this.hourseType = Config.getHouseType();

        this.seleCountry = this.indexSeleCountry;

        //获取选择的是企业还是个人
        this.insuredRel = Config.getRel(this.policyHolderType, this.eleShow.isRelOther);
        //获取地区选择信息
        // this.reginList = Config.getReginSele();
        this.setUploadInit();

    }
};
</script>

<style  lang="scss">
.radio-check {
  label {
    vertical-align: middle;
  }
}
.insure-upload-font {
  width: 100%;
  height: 20px;
  font-size: 14px;
  text-align: center;
}

.common__clause {
  margin-bottom: 50px;
}

.insure__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #c8161d;
}

.insure__list--title {
  font-size: 15px;
  color: #c8161d;
}

.insure__iconspan--title {
  margin-left: 9px;
  font-size: 14px;
}

.insure__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 18px;
}

.insure__formPolicy--group {
  .vux-no-group-title {
    padding-bottom: 20px;
  }
}

.insure__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}

.insure__leftbtn {
  float: left;
  width: 35%;
  background: #fff;
  color: #c8161d;
  span {
    color: #f6690a;
  }
}

.insure__rightbtn {
  background: #c8161d;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.1s;
}

.insure__red {
  color: red;
}

.insure__green {
  color: green;
}

.insure__policyHolderType {
  font-size: 12px;
  color: #7f7f7f;
}

// .weui-input {
//     color: #000 !important;
// }
.insure__middle {
  display: initial;
  vertical-align: super;
}

.insure__input {
  line-height: 0px;
  font-size: 14px;
  color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.weui-label {
  font-size: 14px;
  color: #7f7f7f;
}

input::-webkit-input-placeholder {
  font-size: 14px;
  color: #7f7f7f;
}

.insure__img {
  width: 15px;
  vertical-align: middle;
}

.insure__sure {
  vertical-align: middle;
}

.insure__protocol {
  vertical-align: middle;
  color: #c8161d;
}

.insure__radio {
  display: inline-flex;
}

.insure__input--Bene {
  color: #000;
  font-size: 15px;
}

.insure__iconspan--delete {
  font-size: 12px;
  color: #c8161d;
  border: 1px solid #c8161d;
  border-radius: 5px;
  padding: 2px;
  float: right;
  margin-right: 8px;
}

.insure__base--padding {
  padding-bottom: 20px;
}

.insure__clauseRead {
  border-color: aliceblue;
  white-space: pre-wrap;
  vertical-align: top;
  width: 100%;
  font-size: 15px;
  height: 75vh;
  font-family: Microsoft YaHei;
  overflow-y: scroll; // border: 1px solid #f3f3f3;
  font: 400 14.3333px Arial;
}

.dialog-Einv {
  // padding: 15px !important;
  .weui-dialog {
    max-width: 90% !important;
  }
}

.insure_sele {
  .weui-cell__bd {
    .weui-select {
      height: 20px;
      line-height: 20px; // padding-left: 0px;
      padding-left: 10px;
    }
  }
  .weui-cell__bd::after {
    right: -9px !important;
  }
}

.weui-form-preview__label {
  margin-right: 0em !important;
}

.insure__actionsheet {
  .weui-actionsheet__cell {
    padding: 0px !important;
    text-align: unset !important;
  }
}

.insure__group {
  width: 100%;
  .weui-cells {
    padding: 5px 0px 10px 0px;
  }
}

.insure__group_row {
  //   border: 1px solid #e7e7e7;
  //   margin: 15px 15px;
  //   margin: 3%;
  margin-left: 10px;
  margin-bottom: 5px;
  //   padding: 10px 0px;
  height: max-content;
  .row_label {
    width: 120px;
    height: 100%;
    float: left;
    div {
      width: 100%;
      height: 20px;
      font-size: 14px;
      text-align: center;
      span {
        width: 100%;
      }
      .sp {
        font-size: 10px;
        color: #aaa;
      }
    }
    img {
      display: block;
      clear: both;
      width: 50px;
      height: auto;
      margin: 0px auto;
    }
  }
  .addImages {
    clear: both;
    width: 50px;
    height: auto;
    margin-top: 12px;
  }
}

.insure-text {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  font-size: 15px;
  //   margin: 5px;
  //   padding: 10px;
}
.insure-img {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  margin: 5px;
  //   border: 1px solid #ccc;
  padding: 10px;
  // background: #ffffff url(~assets/x3/ico/close.png) no-repeat right top;
  img {
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
  }
}
.insure__group_row_imgs {
  width: 94%;
  display: table;
  border-top: 1px solid #e7e7e7;
  //   padding: 10px;
  //   margin-top: 10px;
  .img {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    margin: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    background: #ffffff url(~assets/x3/ico/close.png) no-repeat right top;
    img {
      display: block;
      width: 100%;
      height: 100%;
      margin: auto;
    }
  }
  .btn {
    width: 100%;
    margin: 10px auto;
    clear: both;
  }
}
</style>
